<template>
	<view>
		<view class="top">
			<view class="date">
				<view class="date_text">
					<picker mode="date" fields="month" :value="date" @change="bindDateChange" class="picher">
						<view>
							<text style="font-size: 40rpx; color: white;">{{date}}<u-icon name="arrow-down" color = "#ffffff"></u-icon></text>
						</view>
					</picker>
				</view>
				<view class="date_icon">
					<u-icon name="arrow-down" color = "#ffffff"></u-icon>
				</view>
			</view>
			<view class="spend-income">
				<view class="outflew">
					<text>总支出:{{allSpend}}元</text>
				</view>
				<view class="inflew">
					<text>总入账:{{allIncome}}元</text>
				</view>
			</view>
		</view>
		
		<view class="parent">
			<scroll-view scroll-y="true" class="scroll-y">
				<view>
					<view v-for="(item, index) in list" :key="index" class="carBox">
						<view>
							<view class="header-text">
								<view class="date-week">
									{{item.time}}&nbsp;{{item.week}}
								</view>
								<view class="inflew-text">
									{{income_str}}{{item.income}}
								</view>
								<view class="outflew-text">
									{{expenditure_str}}{{item.expenditure}}
								</view>
							</view>
							
							<view class="cell-group" v-for="(item1, index1) in item.list" :key="index1">
								<view class="cell-icon">
									<u-icon :name="item1.typeIcon" size="28" color="#2979ff" ></u-icon>
								</view>
								<view class="cell-item" @click="getDetailInfo(index, index1)">
									<view class="cell-info">
										<view class="info-text">
											<text style="width: 150rpx;">{{item1.billType}}</text>
											<u-icon :name="item1.accountIcon" size="25"></u-icon>
										</view>
										<view class="info-remarks">
											<text>{{item1.billTime}}</text>
										</view>
									</view>
									<view class="cell-money">
										<text>{{[item1.state == 1 ? '-' : '+']+item1.money}}</text>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			
			</scroll-view>
		</view>

		
		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" @fabClick="getAddDetail()"></uni-fab>
	</view>

</template>
 
<script>
	
	
	
	export default {
	    data() {
	        return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				horizontal: 'right',
				vertical: 'bottom',
				
	            date: this.getCurrentMonth(),
				allSpend: '',
				allIncome: '',
				income_str: "入账:",
				expenditure_str: "支出:",
				list: []
	        }
	    },
		onLoad() {
			this.load(uni.getStorageSync('userId'),this.date)
		},
		onPullDownRefresh() {
			this.load(uni.getStorageSync('userId'),this.date)
			uni.stopPullDownRefresh()
		},
		// created() {
		// 	this.load()
		// },
	    methods: {
	        bindDateChange: function(e) {
	            this.date = e.target.value
				const date = new Date()
				// let h = date.getHours()
				// let m = date.getMinutes()
				// let s = date.getSeconds()
				this.load(uni.getStorageSync('userId'),this.date)
	        },
			
			getCurrentMonth () {
				const date = new Date()
	            let year = date.getFullYear()
	            let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				let billDate = `${year}-${month}`
				this.load(uni.getStorageSync('userId'),billDate)
				return `${year}-${month}`
				
			},
			
			getDetailInfo (num1, num2) {
				let data = this.list[num1].list[num2]
				uni.navigateTo({
					url: '/pages/detailInfo/detailInfo?data='+JSON.stringify(data)
				})
			},
			
			getAddDetail (){
				//0代表添加记录
				let data = {
					"submitType": 0
				}
				uni.navigateTo({
					url: '/pages/adddetail/adddetail?data='+JSON.stringify(data)
				})
			},
			
			load (userId, billDate) {
				let params = {
					"userId": userId,
					"billDate": billDate
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/detail/load",
					method: 'POST',
					data: params,
					success (res) {
						_this.allSpend = res.data.data.allSpend
						_this.allIncome = res.data.data.allIncome
						_this.list = res.data.data.list
					}
				})
			}
	    }
	}

</script>
 
<style>
	
	.aaa{
		display: flex;
		flex-wrap: wrap;
	}
	
	.top {
		background: #2979ff;
		height: 150rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color: white;
	},
	
	.date {
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	},
	.date_text{
		display: flex;
		align-items: center;
		width: 170rpx;
		margin: 15rpx 0rpx 15rpx 15rpx;
		padding-left: 30rpx;
	}
	.date_icon {
		display: flex;
		align-items: center;
	},
	
	.spend-income {
		height: 100rpx;
		width: 300rpx;
		color: #f4f4f5;
		font-size: 35rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		
		padding-left: 160rpx;
	},
	.outflew {
		width: 300rpx;
	}
	.inflew {
		width: 300rpx;
	}
	
	.cell-group {
		padding-left: 20rpx;
		padding-right: 20rpx;
	},
	
	.header-text {
		background: #f4f4f5;
		font-size: 33rpx;
		color: #7a7a7a;
		padding-bottom: 10rpx;
		padding-top: 30rpx;
		padding-left: 20rpx;
		border-radius: 30rpx;
		display: flex;
		flex-wrap: wrap;
	},
	.date-week {
		width: 280rpx;
	}
	.outflew-text {
		display: flex;
		justify-content: flex-start;
		width: 200rpx;
	}
	.inflew-text {
		display: flex;
		justify-content: flex-start;
		width: 170rpx;
		margin-left: 30rpx;
	}
	
	.parent {
		padding-top: 10rpx;
		background-color: #e5e5e5;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.scroll-y {
		height: 1200rpx;
	}
	.carBox {
		margin-top: 20rpx;
		border-radius: 25rpx;
		box-shadow: 0 0 10px rgb(142,142,142);
		background-color: rgba(253, 253, 253);
	}

	.cell-group {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;
	}
	.cell-icon {
		width: 85rpx;
		height: 85rpx;
		display: flex;
		align-items: center;
		background-color: #2979ff;
		
		border-radius: 100%;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}
	.cell-item {
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: #c8c9cc;
		border-style: hidden hidden solid hidden;
		border-width: 1rpx;
	}
	.cell-info {
		width: 370rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: 20rpx;
	}
	.info-text {
		display: flex;
		flex-wrap: wrap;
		font-size: 35rpx;
		width: 370rpx;
		height: 60rpx;
	}
	.info-remarks {
		width: 400rpx;
		color: #909399;
	}
	.cell-money {
		width: 200rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		font-size: 40rpx;
		font-weight: bolder;
	}
 
</style>